<template>
  <van-search
    v-model="searchValue"
    :show-action="showAction"
    :placeholder="placeholder"
    @search="onSearch"
    @clear="onClear"
  />
</template>

<script lang="ts">
export default {
  name: 'BaseSearch'
}
</script>

<script setup lang="ts">
import { computed } from 'vue'

const emit = defineEmits(['search', 'clear', 'update:modelValue'])

const props = defineProps({
  modelValue: {
    type: String,
    required: true
  },
  placeholder: {
    type: String,
    default: '请输入搜索关键词'
  },
  showAction: {
    type: Boolean,
    default: false
  }
})

const searchValue = computed({
  get() {
    return props.modelValue
  },
  set(val: string) {
    emit('update:modelValue', val)
  }
})

const onSearch = (val: string) => {
  emit('search', val)
}

const onClear = () => {
  emit('clear')
}
</script>
<style lang="scss" scoped></style>
